<template>
    <el-aside class="side-bar">
        <div class="logo">
            <img src="@/assets/logo.png" alt="" />
        </div>
        <el-menu
            class="el-menu-vertical"
            :default-active="path"
            unique-opened
            :default-openeds="
                path.indexOf(`wallpapers`) > 0 ? [`/wallpapers`] : []
            "
        >
            <el-menu-item index="/dashboard" @click="linkTo(`/dashboard`)">
                <el-icon><DataBoard /></el-icon>
                <span>当前概况</span>
            </el-menu-item>
            <el-menu-item index="/users" @click="linkTo(`/users`)">
                <el-icon><User /></el-icon>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/banners" @click="linkTo(`/banners`)">
                <el-icon><Money /></el-icon>
                <span>轮播管理</span>
            </el-menu-item>
            <el-menu-item index="/notices" @click="linkTo(`/notices`)">
                <el-icon><ChatSquare /></el-icon>
                <span>公告管理</span>
            </el-menu-item>
            <el-sub-menu index="/wallpapers">
                <template #title>
                    <el-icon><Camera /></el-icon>
                    <span>壁纸管理</span>
                </template>
                <el-menu-item
                    index="/wallpapers/categories"
                    @click="linkTo(`/wallpapers/categories`)"
                >
                    <span>壁纸分类</span>
                </el-menu-item>
                <el-menu-item
                    index="/wallpapers/galleries"
                    @click="linkTo(`/wallpapers/galleries`)"
                >
                    <span>壁纸图库</span>
                </el-menu-item>
                <el-menu-item
                    index="/wallpapers/collections"
                    @click="linkTo(`/wallpapers/collections`)"
                >
                    <span>壁纸图集</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-aside>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import {
    DataBoard,
    User,
    Money,
    ChatSquare,
    Camera,
    Folder
} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";

const router = useRouter();
const route = useRoute();
const path = ref(route.meta.path);
// 跳转
const linkTo = (path) => {
    router.replace(path);
};
</script>

<style lang="scss" scoped>
.side-bar {
    width: 200px;
    height: 100%;
    background-color: #fff;
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0px;
        img {
            width: 140px;
        }
    }
    .el-menu-item {
        &.is-active {
            background-color: var(--el-menu-active-color);
            color: #fff;
        }
    }
}
</style>
